{% block sw_cms_list_item %}
<div
    class="sw-cms-list-item"
    :class="componentClasses"
    :title="page && page.translated.name"
>

    {% block sw_cms_list_item_options %}
    <slot name="contextMenu"></slot>
    {% endblock %}

    {% block sw_cms_list_item_image %}
    <div
        v-if="page"
        class="sw-cms-list-item__image"
        :style="previewMedia"
        role="button"
        tabindex="0"
        @click="onItemClick(page)"
        @keydown.enter="onItemClick(page)"
    >
        <div v-if="isDefault">
            <span
                v-if="page.type === 'product_list'"
                class="sw-cms-list-item__is-default"
            >{{ $tc('sw-cms.components.cmsListItem.defaultLayoutProductList') }}</span>
            <span
                v-else-if="page.type === 'product_detail'"
                class="sw-cms-list-item__is-default"
            >{{ $tc('sw-cms.components.cmsListItem.defaultLayoutProductDetail') }}</span>
        </div>
    </div>
    <div
        v-else
        class="sw-cms-list-item__image is--empty"
    >
        {{ $tc('sw-cms.components.cmsListItem.emptyText') }}
    </div>
    {% endblock %}

    {% block sw_cms_list_item_info %}
    <div class="sw-cms-list-item__info">
        <div
            v-if="page"
            class="sw-cms-list-item__status"
            :class="statusClasses"
        ></div>
        <div
            v-if="page"
            class="sw-cms-list-item__title"
            role="button"
            tabindex="0"
            @click="onElementClick"
            @keydown.enter="onElementClick"
        >
            {{ page.translated.name }}
        </div>
        <mt-icon
            v-if="page && page.locked"
            class="sw-cms-list-item__locked"
            name="solid-lock"
            size="16px"
        />
    </div>
    {% endblock %}
</div>
{% endblock %}
